<!DOCTYPE html>
<html>
<head>
    <title>SubtractJS Tutorial</title>
    <script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../Scripts/Subtract.js" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            background: #527578;
            overflow: hidden;
            color: black;
        }
        
        div {
            margin: 5px;
            border: 1px solid black;
            padding: 5px;
            overflow: auto;
            background: #b0c7c9;
        }

        #header {
        }

        #menubar {
            height: 20px;
        }

        #navbar {
            width: 150px;
        }

        #mainbody {
            font-size: 24px;
            padding: 25px;
            background: #EEEEEE;
        }

        #footer {
        }

        h2 {
            text-align: center;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <div id="header" class="sj-fill-top">
        <h2>Creating a Page with SubtractJS</h2>
    </div>
    <div id="menubar" class="sj-fill-top">
        [Item 1] [Item 2] [Item 3] [Item 4] [Item 5] [Item 6]
    </div>
    <div id="navbar" class="sj-fill-left" data-sj-sort-order="5">
        <ul>
            <li>Home</li>
            <li>
                Create Layout
                <ul>
                    <li>Header</li>
                    <li>Menu Bar</li>
                    <li>Navigation Bar and stuff</li>
                    <li>Main Contents</li>
                    <li>Footer</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="mainbody" class="sj-fill">
        Main Content Area
    </div>
    <div id="footer" class="sj-fill-bottom">
        &copy; Copyright 2014 Grax Multimedia
    </div>
</body>
</html>